<template>
  <div>
    <el-row style="margin-top: 10px">
      <el-table
          :data="list"
          :height="tableHeight"
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            label="教室编号"
            prop="classroomNumber"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            label="活动日期"
            prop="activityDate"
            align="center"
            width="100"
            :formatter="formatDate1">
        </el-table-column>
        <el-table-column
            label="活动时间段"
            prop="activeTime"
            align="center"
            width="100" >
        </el-table-column>
        <el-table-column
            label="活动时长	"
            prop="activityTime"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            label="申请人"
            prop="applicant"
            align="center"
            width="70">
        </el-table-column>
        <el-table-column
            label="申请时间"
            prop="applicationTime"
            width="100"
            align="center"
            :formatter="formatDate2">
        </el-table-column>
        <el-table-column
            label="活动描述	"
            prop="activityDescription"
            align="center">
        </el-table-column>
        <el-table-column
            width="220"
            label="操作方式"
            align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="this.pagination.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="this.pagination.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="this.pagination.total">
      </el-pagination>
    </el-row>
    <!-- 对话框 -->
    <activityRoomApplication-edit-dialog :visible.sync="activityRoomApplicationEditDialogVisible" :id.sync="currentActivityRoomApplicationId"></activityRoomApplication-edit-dialog>
    <activityRoomApplication-bind-dialog :visible.sync="activityRoomApplicationBindDialogVisible" :id.sync="currentActivityRoomApplicationId"></activityRoomApplication-bind-dialog>
  </div>

</template>

<script>
import {deleteActivityRoomApplicationById, listActivityRoomApplications} from "@/api/activityRoomApplication";
import ActivityRoomApplicationEditDialog from "./components/ActivityRoomApplicationEditDialog";
import ActivityRoomApplicationBindDialog from "./components/ActivityRoomApplicationBindDialog";
import Formatter from "../../utils/formatter";

export default {
  name: "ActivityRoomApplication",
  components: {ActivityRoomApplicationBindDialog, ActivityRoomApplicationEditDialog},
  data() {
    return {
      tableHeight: window.innerHeight - 179,  // 计算表格高度
      activityRoomApplicationEditDialogVisible: false,  // 是否显示设备添加对话框
      activityRoomApplicationBindDialogVisible: false,
      currentActivityRoomApplicationId: '',  // 当前选中设备ID
      list: [],  // 列表数据
      pagination: {
        page: 0,
        pageSize: 10,
        total: 0
      },  // 分页信息
      multipleSelection: [],
      loading: true
    }
  },
  created: function () {
    this.fetchData()
  },
  methods: {

    // 获得数据
    fetchData() {
      listActivityRoomApplications(1, this.pagination.pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 弹出创建设备信息对话框
    handleCreate() {
      this.currentActivityRoomApplicationId = ''
      this.activityRoomApplicationEditDialogVisible = true
    },

    // 弹出编辑设备信息对话框
    handleEdit(id) {
      this.activityRoomApplicationEditDialogVisible = true;
      this.currentActivityRoomApplicationId = id + ''
    },

    // 删除指定信息记录
    handleDelete(id) {
      deleteActivityRoomApplicationById(id).then((response) => {
        if (response.data.code === 200) {
          this.fetchData();
        } else {
          this.$alert('删除失败', '提示', {
            confirmButtonText: '确定'
          })
        }
      });
    },


    // 改变每页条数刷新数据
    handleSizeChange(pageSize) {
      listActivityRoomApplications(1, pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 翻页刷新数据
    handlePageChange(page) {
      listActivityRoomApplications(page, this.pagination.pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 多选记录
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 格式化日期字段
    formatDate1: function (row) {
      if (!row.activityDate) {
        console.warn('缺少createTime字段值')
        return ''
      }
      return Formatter.formatDate1(row.activityDate,"YYYY-MM-DD")
    },

    formatDate2: function (row) {
      if (!row.applicationTime) {
        console.warn('缺少createTime字段值')
        return ''
      }
      return Formatter.formatDate1(row.applicationTime,"YYYY-MM-DD")
    }

  }
}
</script>

<style scoped>

</style>